<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="static/css/admin.css" rel="stylesheet" type="text/css">
		<link href="static/css/amazeui.css" rel="stylesheet" type="text/css">
		<link href="static/css/personal.css" rel="stylesheet" type="text/css">
		<link href="static/css/systyle.css" rel="stylesheet" type="text/css">
    <link href="static/css/bootstrap.css" rel="stylesheet">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script type="text/javascript" src="static/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="static/js/bootstrap.js"></script>
	</head>
	<body>

		<div id="container">

			<div class="m-order" style="margin-bottom: 0px;">
				<div class="s-bar"><i class="s-icon"></i>我的订单
					<a href="order.html" class="i-load-more-item-shadow">全部订单</a>
				</div>
				<ul>
					<li style="width: 25%;">
						<a href="#" @click="queryByStatus(1)"><i><img src="static/images/pay.png"></i> <span>待付款<em class="m-num" style="display: none;">0</em></span></a>
					</li>
					<li style="width: 25%;">
						<a href="#" @click="queryByStatus(2)"><i><img src="static/images/send.png"></i> <span>待发货<em class="m-num" style="display: none;">0</em></span></a>
					</li>
					<li style="width: 25%;">
						<a href="#l" @click="queryByStatus(3)"><i><img src="static/images/receive.png"></i> <span>待收货<em class="m-num" style="display: none;">0</em></span></a>
					</li>
					<li style="width: 25%;">
						<a href="#" @click="queryByStatus(4)"><i><img src="static/images/comment.png"></i> <span>待评价<em class="m-num" style="display: none;">0</em></span></a>
					</li>
				</ul>
			</div>

			<div class="box-container-bottom" style="margin-bottom: 15px;"></div>

			<div class="m-logistics">
				<div class="s-bar"><i class="s-icon"></i></div>
				<div class="s-content">
					<ul class="lg-list"></ul>
          <table class="table text-center">
            <tr>
              <td>序号</td>
              <td>订单商品</td>
              <td>订单状态</td>
              <td>购买时间</td>
              <td>操作</td>
            </tr>
            <template v-for="(order, index) in orderList">
              <tr>
                <td>{{ index + 1 }}</td>
                <td>{{ order.untitled.substring(0, order.untitled.length - 1) }}</td>
                <td>
                  <label v-if="order.status == '1'">待付款</label>
                  <label v-else-if="order.status == '2'">待发货</label>
                  <label v-else-if="order.status == '3'">待收货</label>
                  <label v-else-if="order.status == '4'">待评价</label>
                  <label v-else-if="order.status == '5'">已完成</label>
                  <label v-else-if="order.status == '6'">已关闭</label>
                </td>
                <td>{{ order.createTime.substring(0, 10) }}</td>
                <td>
                  <template v-if="order.status == '1'">
                    <button class="btn btn-success btn-xs">去支付</button>
                    <button class="btn btn-danger btn-xs">取消订单</button>
                  </template>
                  <template v-if="order.status == '2'">
                    <button class="btn btn-danger btn-xs">取消订单</button>
                  </template>
                  <template v-if="order.status == '3'">
                    <button class="btn btn-success btn-xs">确认收货</button>
                  </template>
                  <template v-if="order.status == '4'">
                    <button class="btn btn-success btn-xs" @click="toCommentAdd(index)">去评价</button>
                  </template>
                  <template v-if="order.status == '5' || order.status == '6'">
                    <button class="btn btn-success btn-xs">删除订单</button>
                  </template>
                </td>
              </tr>
            </template>
            <tr>
              <td colspan="5">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :page-size="limit"
                  :total="count"
                  :current-page="pageNum"
                  @current-change="pager">
                </el-pagination>
              </td>
            </tr>
          </table>
					<div id="wrap" class="wrap"></div>
				</div>
			</div>

		</div>
    <script type="text/javascript" src="static/js/vue.js" ></script>
    <script type="text/javascript" src="static/js/axios.min.js" ></script>
    <script type="text/javascript" src="static/js/cookie-utils.js" ></script>
    <!-- 引入组件库 这个必须放下下面，放在上面加载不出来-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript" src="static/js/base.js"></script>

    <script type="text/javascript">
      var baseUrl = "http://localhost:8080";
      // var baseUrl = "http://47.113.207.152:8080";

      var vm = new Vue({
        el: "#container",
        data: {
          userId: "",
          token: "",
          pageNum: 1,
          limit: 5,
          orderList: [],
          count: 0,
          status: null
        },
        created() {
          this.userId = getCookieValue("userId")
          this.token = getCookieValue("token")

          var url1 = baseUrl + "/order/list2"

          axios({
            url: url1,
            method: "get",
            params: {
              userId: this.userId,
              pageNum: this.pageNum,
              limit: this.limit
            },
            headers: {
              token: this.token
            }
          }).then(res => {
            // console.log(res.data.data)
            this.orderList = res.data.data.list
            this.count = res.data.data.count
          })
        },
        methods: {
          pager(currentPage) {
            this.pageNum = currentPage

            var url1 = baseUrl + "/order/list2"
            var obj = {
              userId: this.userId,
              pageNum: this.pageNum,
              limit: this.limit
            }
            if (this.status != null) {
              obj.status = this.status
            }
            axios({
              url: url1,
              method: "get",
              headers: {
                token: this.token
              },
              params: obj
            }).then(res => {
              // console.log(res.data.data)
              this.orderList = res.data.data.list
              this.count = res.data.data.count
            })
          },
          queryByStatus(status) {
            this.status = status
            var url1 = baseUrl + "/order/list2"
            axios({
              url: url1,
              method: "get",
              params: {
                userId: this.userId,
                pageNum: this.pageNum,
                limit: this.limit,
                status: this.status
              },
              headers: {
                token: this.token
              }
            }).then(res => {
              // console.log(res.data.data)
              this.orderList = res.data.data.list
              this.count = res.data.data.count
            })
          },
          toCommentAdd(index) {
            var order = this.orderList[index]
            localStorage.setItem("order", JSON.stringify(order))
            window.location.href = "user-commentadd.html"
          }
        }
      })
    </script>
	</body>
</html>
